{% extends "../layouts/admin.html" %} {% block content %}

 <header class="header navbar bg-white shadow">
    
    <div class="pull-right offscreen-right">
      <button class="btn btn-primary navbar-btn" onclick="sublime.toggleFilter('.cd-panel')"><i
          class="fa fa-sliders"></i> 筛选
      </button>
    </div>
  </header>
<div class=panel-body style="padding-top: 50px;">
	<div class="table-responsive no-border">
		<input id="unitid" type="hidden">
		<table class="table table-bordered table-striped mg-t datatable">
			<thead>
				<tr>
					<th>地址ID</th>
					<th>用户ID</th>
					<th>姓名</th>
					<th>国家</th>
					<th>省</th>
					<th>市</th>
					<th>区</th>
					<th>地址</th>
					<th>电话</th>
					<th>默认</th>
				
		</table>
	</div>
</div>
<div class="cd-panel from-right">
  <header class="cd-panel-header">
    <h4>高级筛选</h4>
  </header>
  <div class="cd-panel-container">
    <div class="cd-panel-content shadow">
      <div class="form-group">
        <label for="nickname">姓名</label>
        <input type="text" id="name" name="name" onclick="this.value=''" class="form-control" placeholder="姓名">
      </div>
     
      <button id="searchBtn" type="button" class="btn btn-default">查询</button>
    </div>
  </div>
</div>




<script language="JavaScript">
	

	function initDatatable() {
		datatable = $('.datatable').DataTable({
			"dom": '<"toolbar">frtip',
			"searching": false,
			"processing": false,
			"serverSide": true,
			"select": true,
			"ordering": true,
			"language": {
				"url": "/assets/plugins/datatables/cn.json"
			},
			"preDrawCallback": function() {
				sublime.showLoadingbar($(".main-content"));
			},
			"drawCallback": function() {
				sublime.closeLoadingbar($(".main-content"));
			},
			"ajax": {
				"url": "/store/address/index",
				"type": "post",
				"data": function(d) {
					 d.name = $('#name').val();
      
         
				}
			},
			"order": [
				[0,'desc']
			],
			"columns": [
			{
					"data": "id",
					"bSortable": true
				},{
					"data": "user_id",
					"bSortable": true
				},
				{
					"data": "name",
					"bSortable": true
				},
				{
					"data": "country_id",
					"bSortable": false
				},
				{
					"data": "province_id",
					"bSortable": true
				},
				{
					"data": "city_id",
					"bSortable": true
				},
				{
					"data": "district_id",
					"bSortable": true
				},
				{
					"data": "address",
					"bSortable": true
				},
				{
					"data": "mobile",
					"bSortable": true
				},
				{
					"data": "is_default",
					"bSortable": true
				}
				
				
				
				
			],
			"columnDefs": [
			{
				"render": function (data, type, row) {
           return row.country.name;
          },
          "targets": 3
			},
			{
				"render": function (data, type, row) {
           return row.province.name;
          },
          "targets": 4
			},
			{
				"render": function (data, type, row) {
           return row.city.name;
          },
          "targets": 5
			},
			{
				"render": function (data, type, row) {
           return row.district.name;
          },
          "targets": 6
			},
				{
          "render": function (data, type, row) {
            if (data == 1) {
              return '<i id="disable_' + row.id + '" class="fa fa-circle text-success ml5"></i>';
            } else {
              return '<i id="disable_' + row.id + '" class="fa fa-circle text-danger ml5"></i>';
            }
          },
          "targets": 9
        }
			]
		});
	
		$("#searchBtn").on('click', function() {
			datatable.ajax.reload();
		});
	}
  

	$(function() {
		initDatatable();
	});
</script>
{% endblock %}